<template>
	<view class="addrList">
			<scroll-view  scroll-y="true"  class="scroll-Y" >
					<view class="addrUl" v-for="(item,i) in getList" :key="i">
						<view class="addrli">
							<view class="icons">
								<view class="icon">
									{{item.name.split('')[0]}}
								</view>
							</view>
							<view class="addrDetail">
								<view class="name">
									<text>{{item.name}}</text>
									<text>{{item.phone}}</text>
								</view>
								<view class="addrs">
									<text>{{item.regionText}}&nbsp;{{item.address}}</text>
								</view>
							</view>
							<view >
								<uni-icons type="compose" size="20"></uni-icons>
							</view>
						</view>
						<view class=" management" v-show="show">
							<view class="radio" @click="updated(item)"  v-show="item.isCheck">
								<image src="../../static/cz_xz@2x.png"></image>
								<text>默认收货地址</text>
							</view>
							<view class="radio" @click="updated(item)" v-show="!item.isCheck">
								<image src="../../static/cz_zc@2x.png" ></image>
								<text>默认收货地址</text>
							</view>
							<view class="update">
								<view class="copy">
								<image src="../static/img/kaobei.png"></image>
								<text>复制</text>
								</view>
								<view class="copy" @click="del(item.id)">
									<image src="../static/img/shanchu2.png"></image>
									<text>删除</text>
								</view>
							</view>
						</view>
					</view>			
			</scroll-view>
		<view class="bth">
			<view class="bth1">
			 <u-button color="#fd784f" shape="circle"  @click="show = !show">管理</u-button>
			  <u-button color="red" @click="add()">+添加收货地址</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapGetters, mapActions} from 'vuex';
	export default {
		data() {
			return {
				show:false,
			}
		},
		computed:{
			...mapGetters('addrs',['getList']),
		},
		methods: {
			...mapActions('addrs',['updateAddr','delAddr']),
			add(){
				uni.navigateTo({
					url:'/pagesE/addr/addr'
				})
			},
			updated(item){
				item.isCheck = ! item.isCheck;
				this.updateAddr(item);
			},
			del(id){
				this.delAddr(id);
			}
		}
	}
</script>

<style lang="scss">
	.addrList{
		width: 100%;
		display: flex;
		justify-content: center;
		.scroll-Y{
			width: 100%;
			height: 80vh;
			background-color: #eeeeee;
			padding: 10px;
			.addrUl{
				padding: 10px;
				background-color: white;
				border-radius: 8px;
				font-size: 12px;
				color: gray;
				margin-bottom: 10px;
				.addrli{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.icons{
						width: 30px;
						.icon{
							width: 30px;
							height: 30px;
							background-color: #ffe5ce;
							border-radius: 50%;
							line-height: 30px;
							text-align: center;
							color: red;
							font-size: 12px;
							margin-right: 10px;
						}
					}
					.addrDetail{
						width: 80%;
						.name text:nth-child(1){
							color: black;
							font-weight: bold;
						}
					}
				}
				.management{
					display: flex;
					height: 30px;
					justify-content: space-between;
					margin-top: 10px;
					border-top: 1px solid gainsboro;
					.radio{
						display: flex;
						align-items: center;
						justify-content: space-between;
						width: 30%;
					}
					.update{
						display: flex;
						width: 40%;
						justify-content: space-between;
						.copy{
							width: 35%;
							display: flex;
							align-items: center;
							justify-content: space-between;
						}
					}
				}
				.management image{
					width: 20px;
					height: 20px;
				}
			}
		}
		.bth{
			width: 100%;
			display: flex;
			justify-content: center;
			position: fixed;
			bottom: 0;
			left: 0;
			.bth1{
				width: 100%;
				padding: 10px;
				display: flex;
			}
		}
		.bth button:nth-child(1){
			width: 120px;
			margin-right: 10px;
		}
	}
</style>
